<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.material_name"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入商品名"
      />
      <el-input
        v-model="listQuery.material_number"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入商品编码"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >

      <el-table-column align="center" label="商品名称" prop="material_name" />

      <el-table-column align="center" label="编码" prop="material_number" />

      <el-table-column align="center" label="仓库名称" prop="stock_name" />

      <el-table-column align="center" label="库存" prop="qty" />

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listInventory,
} from "@/api/user";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

const genderDic = [
  { value: 1, name: "女" },
  { value: 2, name: "男" },
  { value: "", name: "全部" },
];
const levelDic = [
  { value: 0, name: "普通会员" },
  { value: 1, name: "VIP会员" },
  { value: "", name: "全部" },
];
const statusDic = [
  { value: 0, name: "冻结" },
  { value: 1, name: "激活" },
  { value: "", name: "全部" },
];
export default {
  name: "User",
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        stock_id: null,
        material_number: null,
        material_name: null,
        pageNo: 1,
        limit: 20,
      },
      dataForm: {
        id: undefined,
        level: undefined,
        phone: undefined,
        gender: undefined,
        nickname: undefined,
        status: undefined,
        password: undefined,
      },
      downloadLoading: false,
      genderDic,
      levelDic,
      statusDic,
      textMap: { update: "编辑", create: "创建" },
      dialogFormVisible: false,
      dialogStatus: "",
      rules: {
        nickname: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "用户手机不能为空", trigger: "blur" },
          { pattern: /^1[3456789]\d{9}$/, message: "请输入正确电话" },
        ],
        gender: [
          { required: true, message: "请选择用户性别类型", trigger: "blur" },
        ],
        level: [
          {
            required: true,
            message: "请选择用户会员等级状态",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "请选择用户状态", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^[0-9a-zA-Z$./]{8}/, message: "至少八个数字和字母" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      listInventory(this.listQuery)
        .then((response) => {
          this.list = response.data.data.items;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        level: undefined,
        phone: undefined,
        gender: undefined,
        nickname: undefined,
        status: undefined,
      };
    },
    handleFilter() {
      this.getList();
    },
    handleStatus(row) {
      this.resetForm();
      this.dataForm.id = row.id;
      this.dataForm.status = row.status === 1 ? 0 : 1;
      activeUser(this.dataForm)
        .then((res) => {
          this.$notify.success({
            title: "成功",
            message: "状态更改成功",
          });
          this.getList();
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleCreate() {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          createUser(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data);
              this.dialogFormVisible = false;
              this.$notify.success({
                title: "成功",
                message: "创建成功",
              });
              this.listQuery.nickname = this.dataForm.nickname;
              this.getList();
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        }
      });
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          updateUser(this.dataForm)
            .then(() => {
              for (const v of this.list) {
                if (v.id === this.dataForm.id) {
                  const index = this.list.indexOf(v);
                  this.list.splice(index, 1, this.dataForm);
                  break;
                }
              }
              this.dialogFormVisible = false;
              this.$notify.success({
                title: "成功",
                message: "更新用户成功",
              });
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        }
      });
    },
    handleDelete(row) {
      this.$confirm(
        "此操作将永久删除该用户---" + row.nickname + "---, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deleteUser(row.id, row.nickname)
            .then((response) => {
              this.$notify.success({
                title: "成功",
                message: "删除成功",
              });
              const index = this.list.indexOf(row);
              this.list.splice(index, 1);
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        })
        .catch(() => {
          return false;
        });
    },
  },
};
</script>
